<template>
	<view>
		<view class="xing">
			<view class="xing_k" v-for="(a,b) in starContent" :key="b">
				<view class="x_title">{{a.name}}：</view>
				<view class="x_img">
					<view class="ping">
						<view class="zheng_xin" v-for="(row,index) in a.total" @click="setValue(b,index)" :key="index">
							<image class="img" src="../../../static/images/xin.png" v-if="a.value-0.5>index" />
							<image class="img" src="../../../static/images/b_xin.png" v-if="a.ban && a.value>index"/>
							<image class="img" src="../../../static/images/h_xin.png" v-if="a.value<=index"/>
						</view>
					</view>
				</view>
				<view class="x_fen">{{a.value}}分</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Star',
		props: {
			// 最多上数量 1-9
			star: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				starContent: [],
			}
		},
		created() {
			this.setStarContent()
		},
		methods: {
			setStarContent: function(){
				this.starContent = this.star
			},
			setValue: function(b,e){
				//console.log(e)
				var that = this
				var a = e++
				that.starContent[b].sum++
				//console.log(that.starContent[b].sum)
				if(that.starContent[b].sum == 1){
					that.starContent[b].value = e-0.5
					that.starContent[b].ban = true
					that.starContent[b].sum = -1
				}else{
					that.starContent[b].ban = false
					that.starContent[b].value = e++
				}
				
				that.$emit('submitStar', that.starContent)
			},
		}
	}
</script>

<style>
	/* 点评星级 */
	.xing{
		width: 100%;
		padding: 25rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	.xing_k{
		width: 100%;
		line-height:80rpx;
	}
	.x_title{
		float: left;
	}
	.x_img{
		/* width: 250upx; */
		height: 30rpx;
		max-width:80%;
		float: left;
	}
	.ping{
		/* width: 150upx; */
		height: 30rpx;
		float: left;
	}
	.zheng_xin{
		width: 30rpx;
		height: 30rpx;
		margin: 10rpx;
		float: left;
	}
	.ban_xin{
		width: 30rpx;
		height: 30upx;
		margin: 10upx;
		float: left;
	}
	.img{
		width: 100%;
		height: 100%;
	}
	/* 点评内容 */
	.content{
		padding: 20rpx;
	}
	.title{
		line-height: 100rpx;
	}
	.pingtext{
		margin: 0 auto;
		width: 90%;
		border-radius: 10rpx;
		padding: 20rpx;
		background: #f5f5f5;
	}
	.btn{
		width:60% ;
		height: 100rpx;
		margin: 100rpx auto;
		background: linear-gradient(to left,#68aef9,#8a96fc);
		border-radius:50rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}
</style>
